<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品详情</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">
        <img src="/img/logo.png" height="30" class="d-inline-block align-top" alt="">
        Mall电商运营平台
    </a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="/product/DataView">数据看板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="/product/List">商品维护</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/user/List">会员管理</a>
        </li>
    </ul>
    <span class="navbar-text"><a class="nav-link " th:href="@{/adminInfo(name=${userName})}"><i class="fa fa-user"></i>个人中心[<span th:text="${userName}"></span>]</a></span>
</nav>
<div class="container-fluid" style="margin-top: 100px;">
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="card">
                <div class="card-header bg-light lead">
                    商品: <span th:text="${product.productName}"></span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <img th:src="${product.imageUrl}" class="img-fluid img-thumbnail" alt="">
                        </div>
                        <div class="col-md-8">
                            <form action="/updateProduct" method="post">
                                <table class="table table-condensed lead">
                                    <tr>
                                        <td style="width: 100px;">名称</td>
                                        <td>
                                            <span th:text="${product.productName}"></span>
<!--                                            <input type="text"  th:text="${product.productName}"></input>-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>价格</td>
                                        <td><span  th:text="${product.price}"></span>￥</td>
                                    </tr>
                                    <tr>
                                        <td>库存</td>
                                        <td><span th:text="${product.stock}"></span></td>
                                    </tr>
                                    <tr>
                                        <td>状态</td>
                                        <td>
    <span th:classappend="${product.status}? 'badge badge-success' : 'badge badge-danger'"
          th:text="${product.status} ? '上架' : '下架'"></span>
                                        </td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>访问量</td>
                                        <td><span class="badge badge-secondary"><span th:text="${product.views}"></span></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>上架时间</td>
                                        <td><span th:text="${product.launchDate}"></span></td>
                                    </tr>
                                </table>
                            </form>
                            <hr>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-justify ">
                                <span th:text="${product.description}" readonly></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-success btn-sm" onclick="history.go(-1)"><i class="fa fa-history"></i> 返回</a>
                    <a href="#" th:href="@{/seckill(id=${product.id})}" class="btn btn-success btn-sm offset-10"><i class="fa fa-star-o"></i> 加入秒杀</a>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
<!-- 引入百度Echarts -->
<script src="/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    /* 折线图 */
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('lineChart'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['销售量', '访问量']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [

            {
                name: '销售量',
                type: 'line',
                stack: '总量',
                areaStyle: {
                    normal: {}
                },
                data: [320, 332, 301, 334, 390, 330]
            },
            {
                name: '访问量',
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {
                    normal: {}
                },
                data: [820, 932, 901, 934, 1290, 1330]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
